<template>
  <view style="background-color: #f8f8f8">
    <view class="headerimg">
      <swiper :autoplay="true" :interval="3000" :duration="1000" class="swiper">
        <swiper-item v-for="item in actdetail.banner_images" :key="item">
          <image :src="item" mode="aspectFill" style="width: 100%; height: 100%"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 价格 -->
    <view class="price">
      <!-- 报名中 -->
      <view class="money" v-if="actdetail.status == 0">
        <view class="fullstyle">
          <text>￥</text>
          {{ actdetail.price == '0.00' || actdetail.price == '0' ? '免费' : actdetail.price }}
          <view class="waitin">报名中</view>
        </view>
        <view @click="$refs.popup.open()"><image src="../static/icon/share.png" style="width: 40rpx; height: 40rpx; color: #ccc"></image></view>
      </view>
      <!-- 已报名 -->
      <view v-if="actdetail.status == 2" class="money">
        <view class="fullstyle">
          <text>￥</text>
          {{ actdetail.price == '0.00' || actdetail.price == '0' ? '免费' : actdetail.price }}
          <view class="full">已开始</view>
        </view>
        <view @click="$refs.popup.open()"><image src="../static/icon/share.png" style="width: 40rpx; height: 40rpx; color: #ccc"></image></view>
      </view>
      <!-- 爆满 -->
      <view class="money" v-if="actdetail.status == 1">
        <view class="fullstyle">
          <text>￥</text>
          {{ actdetail.price == '0.00' || actdetail.price == '0' ? '免费' : actdetail.price }}
          <view class="full">已爆满</view>
        </view>
        <view @click="$refs.popup.open()"><image src="../static/icon/share.png" style="width: 40rpx; height: 40rpx; color: #ccc"></image></view>
      </view>
      <!-- 已取消 -->
      <view v-if="actdetail.status == 3 || actdetail.status == 4" class="money">
        <view>
          <view class="aleady">
            <text>￥</text>
            {{ actdetail.price == '0.00' || actdetail.price == '0' ? '免费' : actdetail.price }}
            <view class="aleadysign">已结束</view>
          </view>
          <view class="cnalcetext">未达成最少报团人数，活动自动取消</view>
        </view>

        <view @click="$refs.popup.open()"><image src="../static/icon/share.png" style="width: 40rpx; height: 40rpx; color: #ccc"></image></view>
      </view>
      <!-- 时间 -->
      <view class="title">{{ actdetail.title }}</view>
      <view class="time">
        <image src="https://qn.boruichengyi.com/static/index/images/time.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom; margin-right: 12rpx"></image>
        <text class="timetext">时间：{{ actdetail.start_time_text + '-' + actdetail.end_time_text }}</text>
      </view>
      <!-- 地点 -->
      <view class="place" @click="goaddress(actdetail.address)">
        <image src="https://qn.boruichengyi.com/static/index/images/position.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom; margin-right: 12rpx"></image>
        地点：
        <text style="width: 504rpx; height: 80rpx" class="title">{{ actdetail.address }}</text>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <!-- 人数 -->
    <view class="peolple">
      <view class="peoplenumber">
        <view class="peopleleft">
          <image src="../static/icon/totalpeople.png" mode="" style="width: 40rpx; height: 40rpx; vertical-align: bottom; margin-right: 10rpx"></image>
          <text>人数 ({{ actdetail.man + actdetail.woman + '/' + actdetail.max_num }})</text>
        </view>
        <view class="peopleright">
          <image src="../static/icon/gendernan.png" mode="" style="width: 40rpx; height: 40rpx; vertical-align: bottom"></image>
          <text>{{ actdetail.man }}</text>
          <image src="../static/icon/gendernv.png" mode="" style="width: 40rpx; height: 40rpx; vertical-align: bottom"></image>
          <text>{{ actdetail.woman }}</text>
        </view>
      </view>
      <view class="avatat" @click="gosignuplist(actdetail.id)">
        <view>
          <image :src="item.avatar" class="avatatItem" mode="aspectFill" v-for="(item, index) in actdetail.user5_list" :key="index"></image>
          <view class="avatatItem" style="background-color: #d2d2d2; border: 1px solid #fff; text-align: center; line-height: 80rpx; color: #fff; line-height: 80prx">...</view>
        </view>
        <view class="export" v-if="!isShowcallPhone" @click.stop="exportuserinfo(actdetail.id)">导出</view>
      </view>
    </view>
    <!-- 发起者 -->
    <view class="pusherdiv">
      <view class="pusher">
        <image src="../static/icon/personl.png" mode="aspectFill" style="width: 32rpx; height: 32rpx; vertical-align: bottom; margin-right: 12rpx"></image>
        发起者
      </view>
      <view class="personInfo">
        <view>
          <image :src="actdetail.avatar" class="puseravatar" mode="aspectFill"></image>
          <text>{{ actdetail.nickname }}</text>
        </view>
        <view class="callher" v-if="isShowcallPhone" @click="$refs.callRef.open()">联系他</view>
      </view>
    </view>
    <!-- 详情 -->
    <view class="detail">
      <view class="title">
        <image src="../static/icon/detail.png" mode="" class="detailicon"></image>
        <text>详情</text>
      </view>
      <rich-text :nodes="actdetail.content"></rich-text>
    </view>
    <view class="tip">
      <view>
        <image src="../static/icon/tip.png" class="detailicon" mode=""></image>
        <text>{{ actdetail.tip.name }}</text>
      </view>
      <rich-text :nodes="actdetail.tip.content"></rich-text>
    </view>
    <!-- 报名按钮 is_me-->
    <view class="btndad" v-if="actdetail.is_signup == 0 && actdetail.status != 4 && actdetail.status != 3 && actdetail.is_me == 0" @click="addact(actdetail.id)">
      <button class="signup">报名</button>
    </view>
    <!-- 取消报名按钮 -->
    <view class="btndad" v-if="actdetail.is_signup == 1 && actdetail.status != 4 && actdetail.is_me == 0" @click="$refs.cancelRef.open()">
      <button class="cancelsign">取消报名</button>
    </view>
    <!-- 发布按钮 -->
    <!--    <view class="btndad" v-if="false"><button class="signup">发布</button></view> -->
    <!-- 确认删除按钮 -->
    <!--  <view class="btndad" v-if="false" @click="$refs.okdelRef.open()"><button class="delbtn">删除</button></view> -->
    <!-- 取消活动 -->
    <view class="btndad" v-if="false" @click="$refs.cancelactRef.open()"><button class="delbtn">取消活动</button></view>
    <!-- 删除活动 -->
    <view class="btndad" v-if="actdetail.is_me == 1" @click="$refs.delactRef.open()">
      <button class="delbtn">删除活动</button>
    </view>
    <!-- 分享弹窗 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view class="itemtitle">分享</view>
      <view class="item"><button open-type="share" class="btnshare" style="font-size: 32rpx; background-color: transparent">直接分享</button></view>
      <view class="item" @click="saveactimg(actdetail.id)">保存图片</view>
      <view class="item" @click="$refs.popup.close()">取消</view>
    </uni-popup>
    <!-- 联系他弹框 -->
    <uni-popup ref="callRef" type="center">
      <view class="container">
        <view class="header" @click="$refs.callRef.close()">
          <image src="../static/icon/close.png" mode="" class="closeicon"></image>
        </view>
        <view class="headerTitle">提示</view>
        <view class="numbercontainer">
          <view class="number">联系电话：{{ actdetail.phone }}</view>
          <view class="phoneicon" @click="calluser(actdetail.phone)">
            <image src="../static/icon/callPhone.png" class="phoneicon" mode=""></image>
          </view>
        </view>
        <!-- 二维码 -->
        <view class="imagecontainer">
          <view class="imageItem">
            <image :src="actdetail.wx_qrcode_image" mode="aspectFill" class="imageformat" :show-menu-by-longpress="true"></image>
            <view style="margin-left: 73rpx; margin-top: 20rpx; font-weight: 700">个人微信</view>
          </view>
          <view class="imageItem">
            <image :src="actdetail.wx_group_qrcode_image" mode="aspectFill" class="imageformat" :show-menu-by-longpress="true"></image>
            <view style="margin-left: 73rpx; margin-top: 20rpx; font-weight: 700">微信群</view>
          </view>
        </view>
        <!-- 长按保存 -->
        <view class="bootomtip">长按或者保存添加微信</view>
      </view>
    </uni-popup>
    <!-- 取消报名弹框 -->
    <uni-popup ref="cancelRef" type="center" background-color="#fff">
      <view class="canceladd">
        <view class="title">提示</view>
        <view class="canceltext">确认要取消报名此次活动吗？</view>
        <view class="cancelfooter">
          <view class="cancelokbtn" @click="canceladdin(actdetail.id)">确认</view>
          <view class="cancelbtn" @click="$refs.cancelRef.close()">取消</view>
        </view>
      </view>
    </uni-popup>
    <!-- 确认删除弹框 -->
    <!--    <uni-popup ref="okdelRef" type="center" background-color="#fff">
      <view class="canceladd">
        <view class="title">提示</view>
        <view class="canceltext" style="margin-left: 191rpx">确认要删除此次活动吗？</view>
        <view class="cancelfooter">
          <view class="cancelokbtn">确认</view>
          <view class="cancelbtn" @click="$refs.okdelRef.close()">取消</view>
        </view>
      </view>
    </uni-popup> -->
    <!-- 取消活动弹框 -->
    <uni-popup ref="cancelactRef" type="center">
      <view class="canceladd">
        <view class="title">提示</view>
        <view class="canceltext" style="margin-left: 191rpx">确认要取消此次活动吗？</view>
        <view class="cancelfooter">
          <view class="cancelokbtn">确认</view>
          <view class="cancelbtn" @click="$refs.cancelactRef.close()">取消</view>
        </view>
      </view>
    </uni-popup>
    <!-- 删除活动弹框 -->
    <uni-popup ref="delactRef" type="center">
      <view class="canceladd">
        <view class="title">提示</view>
        <view style="margin-left: 219rpx; width: 280rpx; height: 80rpx; font-size: 28rpx; margin-bottom: 56rpx; font-weight: bold; text-align: center">
          确认要删除该活动吗？ 删除后将不可恢复！
        </view>
        <view class="cancelfooter">
          <view class="cancelokbtn" @click="delbtn(actdetail.id)">确认</view>
          <view class="cancelbtn" @click="$refs.delactRef.close()">取消</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { timeChange } from '../../utils/tools.js';
import qqmap from '../../utils/qqmap.js';
export default {
  onShareAppMessage(res) {
    return {
      title: this.actdetail.title,
      path: '/sub_active/detail/detail?id=' + this.currentId,
      imageUrl: this.actdetail.cover_image
    };
  },
  onShareTimeline() {
    return {
      title: this.actdetail.title,
      //分享朋友圈的参数
      query: 'id=' + this.currentId
    };
  },
  mounted() {
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    });
  },
  data() {
    return {
      actdetail: {},
      pushData: {},
      currentId: '',
      isShowcallPhone: true, // 是否显示联系他
      currentTitle: ''
    };
  },
  onLoad(opt) {
    if (opt.pushData) {
      this.pushData = JSON.parse(opt.pushData);
    }
    this.currentId = opt.id;
    this.gteactdetail(opt.id);
    this.prepage = getCurrentPages()[getCurrentPages().length - 1].route;
    // 获取我发布的活动
    this.getmyact();
  },

  methods: {
    // 获取我发布的活动
    async getmyact() {
      const res = await uni.$http.post('user/getMyActivityList', {
        type: 0
      });

      res.data.data.forEach((item) => {
        if (item.id == this.currentId) {
          this.isShowcallPhone = false;
        }
      });
    },
    // 获取活动详情
    async gteactdetail(id) {
      const res = await uni.$http.post('index/getActivityInfo', {
        activity_id: id
      });
      console.log(res.data.data);
      this.actdetail = res.data.data;
      if (this.actdetail.user5_list.length > 3) {
        this.actdetail.user5_list = this.actdetail.user5_list.splice(0, 3);
      }
      // console.log(item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1]);
      this.actdetail.end_time_text =
        this.actdetail.end_time_text.split('-')[1] + '-' + this.actdetail.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
      this.actdetail.start_time_text =
        this.actdetail.start_time_text.split('-')[1] + '-' + this.actdetail.start_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
      this.actdetail.endTime = timeChange(this.actdetail.end_time);
    },
    // 报名
    async addact(id) {
      const res = await uni.$http.post('index/signUp', {
        activity_id: id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });

      if (res.data.code) {
        this.actdetail.is_signup = 1;
        uni.showToast({
          title: '报名成功',
          icon: 'none'
        });
        this.gteactdetail(this.currentId);
      }
    },
    // 取消报名
    async canceladdin(id) {
      const res = await uni.$http.post('index/cancelSignUp', {
        activity_id: id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      this.$refs.cancelRef.close();
      if (res.data.code == 1) {
        this.actdetail.is_signup = 0;
        uni.showToast({
          title: '取消报名成功',
          icon: 'none'
        });
        this.gteactdetail(this.currentId);
      } else {
        uni.showToast({
          title: '该活动状态下，不可取消报名',
          icon: 'none'
        });
      }
    },
    // 打电话
    calluser(phone) {
      uni.makePhoneCall({
        phoneNumber: phone //仅为示例
      });
    },
    // 保存分享图片
    async saveactimg(id) {
      console.log(id);
      const res = await uni.$http.post('index/shareActivity', {
        activity_id: id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });

      if (res.data.code == 1) {
        uni.downloadFile({
          url: res.data.data,
          success: (res) => {
            console.log('下载的图片路径-----', res);
            if (res.statusCode == 200) {
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                  this.$refs.popup.close();
                  uni.showToast({
                    title: '图片保存成功',
                    icon: 'none'
                  });
                }
              });
            }
          }
        });
      }
    },

    // 地址逆解析
    goaddress(address) {
      qqmap.geocoder({
        address,
        success: (res) => {
          console.log(res.result.location);
          uni.openLocation({
            latitude: res.result.location.lat,
            longitude: res.result.location.lng,
            success: (res) => {
              console.log(res);
            }
          });
        }
      });
    },
    // 导出他人信息
    async exportuserinfo(id) {
      const res = await uni.$http.post('user/export', {
        activity_id: id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });

      uni.downloadFile({
        url: res.data.data,
        success: (res) => {
          console.log(res);
          uni.openDocument({
            filePath: res.tempFilePath,
            showMenu: true
          });
        }
      });
    },
    // 跳转到报名列表
    gosignuplist(id) {
      uni.navigateTo({
        url: '/sub_active/signuplist/signuplist?id=' + id
      });
    },
    // 删除活动
    async delbtn(id) {
      const res = await uni.$http.post('user/delActivity', {
        activity_id: id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });

      this.$refs.delactRef.close();
      if (res.data.code == 0) {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
        return;
      }
      uni.redirectTo({
        url: '/sub_my/exportactdata/exportactdata'
      });
    }
  }
};
</script>

<style lang="less">
// 导出按钮
.export {
  display: inline-block;
  width: 140rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #0398ff;
  background: rgba(3, 152, 255, 0.11);
  margin-right: 30rpx;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  border: 2rpx solid #0398ff;
}
// 头部已取消
.cnalcetext {
  margin-top: 6rpx;
  font-size: 24rpx;
}
// 删除按钮
.delbtn {
  width: 690rpx;
  height: 90rpx;
  line-height: 90rpx;
  background: #ec1303;
  color: #fff;
  font-size: 30rpx;

  border-radius: 46rpx 46rpx 46rpx 46rpx;
}

//  取消报名弹框
.canceladd {
  width: 690rpx;
  height: 400rpx;
  background: #fff;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  .title {
    width: 60rpx;
    height: 42rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin: 0rpx 315rpx 78rpx 315rpx;
    padding-top: 30rpx;
  }
  .canceltext {
    width: 364rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin: 0 163rpx 74rpx 163rpx;
  }
  .cancelfooter {
    display: flex;
    .cancelokbtn {
      width: 300rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      color: #fff;
      margin-left: 36rpx;
      background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
      border-radius: 46rpx 46rpx 46rpx 46rpx;
    }
    .cancelbtn {
      width: 300rpx;
      height: 90rpx;
      background: #f1f1f1;
      line-height: 90rpx;
      text-align: center;
      color: #000000;
      margin-left: 20rpx;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
/* 分享弹框 */
.itemtitle {
  text-align: center;
  line-height: 120rpx;
  font-weight: 800;
}
.item {
  text-align: center;
  line-height: 120rpx;
  .btnshare::after {
    border: none;
  }
}
/* 已爆满 */
.full {
  width: 90rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  margin-left: 20rpx;
  color: #fff;
  background: #ec1303;
  font-size: 20rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  opacity: 0.8;
}
.fullstyle {
  display: flex;
}
// 报名中
.waitin {
  width: 90rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  margin-left: 20rpx;
  color: #fff;
  background: #7f7f7f;
  font-size: 20rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}
/* 已报名 */
.freetext {
  width: 80rpx;
  height: 56rpx;
  font-size: 40rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 800;
  color: #ec1303;
  line-height: 56rpx;
  -webkit-background-clip: text;
}
.aleadysign {
  margin-left: 10rpx;
  width: 90rpx;
  height: 40rpx;
  font-size: 20rpx;
  line-height: 40rpx;
  text-align: center;
  font-weight: 500;
  color: #fff;
  background: #000000;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  opacity: 0.5;
}
.aleady {
  display: flex;
  align-items: center;
}
/* 已报名中的取消报名 */
.cancelsign {
  width: 690rpx;
  height: 90rpx;
  background: #f1f1f1;
  border-radius: 46rpx 46rpx 46rpx 46rpx;
}
.cancelsign::after {
  border: none !important;
}
.uni-popup__wrapper.center {
  background-color: transparent !important;
}
.headerimg {
  width: 750rpx;
  height: 500rpx;

  .swiper {
    width: 750rpx;
    height: 500rpx;
  }
}
.price {
  position: relative;
  z-index: 2;
  top: -30rpx;
  padding: 28rpx;
  background: #ffffff;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
}
.money {
  display: flex;
  font-family: PingFang SC, PingFang SC;
  justify-content: space-between;
  margin: 22rpx 0rpx 12rpx 0rpx;
  font-weight: 800;
  color: #ec1303;
}
.title {
  height: 84rpx;
  font-size: 30rpx;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.time {
  margin-top: 28rpx;
}
.timetext {
  font-size: 28rpx;
}
.place {
  display: flex;
  margin-top: 30rpx;
  align-items: flex-start;
  font-size: 28rpx;
}

.btndad {
  width: 750rpx;
  height: 130rpx;
  background: #fff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.signup {
  width: 690rpx;
  height: 90rpx;
  color: #fff;
  background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
  border-radius: 46rpx 46rpx 46rpx 46rpx;
  margin-bottom: 20rpx;
  opacity: 1;
}
.peoplenumber {
  padding: 28rpx;
  display: flex;
  justify-content: space-between;
}
.peolple {
  width: 750rpx;
  height: 212rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.avatatItem {
  width: 80rpx;
  height: 80rpx;
  display: inline-block;
  margin-left: -30rpx;
  border-radius: 50%;
  vertical-align: middle;
}
.avatat {
  display: flex;
  justify-content: space-between;
  padding-left: 58rpx;
}
.pusherdiv {
  margin-top: 10rpx;
  padding: 28rpx;
  margin-bottom: 10rpx;
  height: 210rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.puseravatar {
  width: 80rpx;
  height: 80rpx;
  margin-right: 10rpx;
  border-radius: 38rpx 38rpx 38rpx 38rpx;
  opacity: 1;
  border: 2rpx solid #ffffff;
  vertical-align: middle;
}
.callher {
  width: 140rpx;
  height: 60rpx;
  background: rgba(3, 152, 255, 0.11);
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  opacity: 1;
  text-align: center;
  line-height: 60rpx;
  color: #0398ff;
  border: 2rpx solid #0398ff;
}
.personInfo {
  display: flex;
  justify-content: space-between;
  margin-top: 28rpx;
}
.detail {
  box-sizing: border-box;
  width: 750rpx;
  background: #ffffff;
  padding: 28rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.detailicon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 10rpx;
  vertical-align: bottom;
}
.detailtext {
  width: 696rpx;
  height: 236rpx;
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 50rpx;
  -webkit-background-clip: text;
}
.detailimage {
  margin: 20rpx 110rpx;
  width: 478rpx;
  height: 320rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.bottondeatiltext {
  width: 696rpx;
  height: 136rpx;
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 50rpx;
  -webkit-background-clip: text;
}
.tip {
  box-sizing: border-box;
  width: 750rpx;
  height: 466rpx;
  padding: 28rpx;
  margin-bottom: 100rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.tiptext {
  width: 696rpx;
  height: 336rpx;
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 50rpx;
  -webkit-background-clip: text;
}
/* 此处是联系他弹框 */
.container {
  width: 690rpx;
  height: 652rpx;
  background: #ffffff;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  opacity: 1;
  .closeicon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 40rpx;
    margin-top: 30rpx;
  }
  .header {
    display: flex;
    justify-content: flex-end;
  }
  .headerTitle {
    font-weight: 700;
    text-align: center;
    font-size: 30rpx;
  }
  .numbercontainer {
    display: flex;
    margin-top: 52rpx;
    justify-content: space-between;
    .phoneicon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 50rpx;
      vertical-align: middle;
    }
    .number {
      margin-left: 36rpx;
      height: 40rpx;
      color: #000000;
      font-weight: 700;
      font-size: 28rpx;
    }
  }
  .imagecontainer {
    display: flex;
    margin-top: 30rpx;
    .imageItem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .imageformat {
        width: 236rpx;
        height: 236rpx;
        margin-left: 73rpx;
      }
    }
  }
  .bootomtip {
    width: 260rpx;
    height: 36rpx;
    font-size: 26rpx;
    margin: 40rpx 216rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}
</style>
